<template>
  <div class="border02-option">
    <el-form label-width="90px" size="mini">
      <el-collapse class="customer-collapse">
        <el-collapse-item title="标题">
          <el-form-item label="内容">
            <el-input v-model="attribute.borderTitle" clearable/>
          </el-form-item>
          <div class="group">
            <div class="group-label">样式</div>
            <div class="group-content">
              <el-form-item label="颜色">
                <el-color-picker v-model="attribute.borderTitleColor" show-alpha />
              </el-form-item>
              <el-form-item label="文字大小">
                <el-input-number v-model="attribute.borderTitleSize"/>
              </el-form-item>
              <el-form-item label="宽度">
                <el-input-number v-model="attribute.borderTitleWidth"/>
              </el-form-item>
              <el-form-item label="高度">
                <el-input-number v-model="attribute.borderTitleHeight"/>
              </el-form-item>
            </div>
          </div>

        </el-collapse-item>
        <el-collapse-item title="边框">
          <el-form-item label="背景颜色">
            <el-color-picker v-model="attribute.bgColor" show-alpha/>
          </el-form-item>
          <div class="group">
            <div class="group-label">线条颜色</div>
            <div class="group-content">
              <el-form-item label="颜色1">
                <el-color-picker v-model="attribute.colors[0]" show-alpha/>
              </el-form-item>
              <el-form-item label="颜色2">
                <el-color-picker v-model="attribute.colors[1]" show-alpha/>
              </el-form-item>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'border01-option',
  cnName: '边框01-option',
  props: {
    attribute: Object
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.border02-option {

}
</style>
